@mixin row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

@mixin column-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@mixin text-inline {
  text-overflow: ellipsis !important;
  white-space: nowrap;
  overflow: hidden !important;
}

@mixin linear-gradient($color1, $color2) {
  background: $color1;
  /* For browsers that do not support gradients */
  background: -webkit-linear-gradient(90deg, $color1, $color2);
  /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(90deg, $color1, $color2);
  /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(90deg, $color1, $color2);
  /* For Firefox 3.6 to 15 */
  background: linear-gradient(0deg, $color1, $color2);
  /* Standard syntax */
}

@mixin index-style1 ($flex-direction, $align) {
  @include row-center;
  background: $background-color;
  font-size: $font-size;
  letter-spacing: 10px;
  padding: 85px;
  flex-direction: $flex-direction;
  text-align: $align;

  img {
    width: 17%;
  }

  span {
    margin: 45px;
    font-weight: bold;
  }

  p {
    line-height: 40px;
  }
}

@mixin index-style2 ($flex-direction, $align) {
  @include row-center;
  background: $background-color;
  font-size: $font-size;
  letter-spacing: 10px;
  padding: 85px;
  flex-direction: $flex-direction;
  text-align: $align;

  img {
    width: 17%;
    margin: 45px;
  }

  span {
    font-weight: bold;
  }

  p {
    line-height: 40px;
  }
}